<template>
  <dv-charts :option="option" />
</template>

<script>

export default {
  name: "GaugeChart",
  props: {
    // 数据
    chartsGaugeData: {
      type: Object,
      required: true,
    },
    // 详情文字
    detailsText: {
      type: String,
      required: true,
      default: ''
    },
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    createChart() {
      this.option = {
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 40,
            radius: '80%',
            data: this.chartsGaugeData.series,
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            dataItemStyle: {
              lineCap: 'round'
            },
            backgroundArc: {
              show: true,
              style: {
                stroke: '#092b3e'
              }
            },
            details: {
              show: true,
              formatter: this.detailsText,
              style: {
                  fontSize: 20,
              }
            }
          }
        ]
      };
    },
  },
  watch: {
    chartsGaugeData: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart();
        }
      },
      deep: true,
    },
  },
};
</script>

</style>
